<template>
  <div class="flow">
    <div ref="box" style="width:100%;height:240px;">
    </div>

  </div>
</template>

<script>
import echarts from "echarts"
export default {
  data() {
    return {
      data: [
        [820, 932, 901, 934, 1290, 1330, 1320],
        [720, 232, 301, 434, 190, 230, 420]
      ]
    }
  },
  methods: {
    print() {
      let print = echarts.init(this.$refs.box)
      let self = this
      let option = {
        xAxis: {
          type: "category",
          data: ["2001", "2002", "2003", "2004", "2005", "2006", "2007"]
        },
        color: ["red","blue"],
        textStyle: {
          color: "yellow"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "20",
            fontWeight: "bold"
          }
        },
        legend: {
          data: [{name: "流入",icon: "circle"}, {name: "流出",icon: "circle"}],
          textStyle: {
            color: "yellow"
          }
        },
        tooltip: {
          // show: false,
          trigger: "item",
          textStyle: {
            fontSize: 16
          }
          // formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        yAxis: {
          type: "value",
          textStyle: {
            color: "#ffffff",
            fontSize: 15
          }
        },
        series: [{
          data: self.data[0],
          type: "line",
          smooth: true,
          lineStyle: {
            color: "red"
          },
          name: "流入"
        },{
          data: self.data[1],
          type: "line",
          smooth: true,
          lineStyle: {
            color: "blue"
          },
          name: "流出"
        }]
      }
      print.setOption(option)
    }

  },
  mounted() {
    this.print()
  }
}
</script>

<style lang="scss">
  .flow {
    width: 100%;
    display: inline-block;
    margin-top: 10px;
    div {
      display: inline-block;
    }
  }
</style>